<template xmlns:href="http://www.w3.org/1999/xhtml">
  <div style="width: 1280px;margin: 0 auto">
    <div style="width: 1100px;margin: 0 auto">
      <!-- 轮播图 -->
      <el-carousel style="width: 1100px;border-radius: 10px;" :interval="3000" arrow="always">
        <el-carousel-item><img src="images/indeximgs/banner1.jpg" width="100%" height="300px"></el-carousel-item>
        <el-carousel-item><img src="images/indeximgs/banner2.jpg" width="100%" height="300px"></el-carousel-item>
        <el-carousel-item><img src="images/indeximgs/banner3.jpg" width="100%" height="300px"></el-carousel-item>
        <el-carousel-item><img src="images/indeximgs/banner4.jpg" width="100%" height="300px"></el-carousel-item>
        <el-carousel-item><img src="images/indeximgs/banner5.jpg" width="100%" height="300px"></el-carousel-item>
      </el-carousel>
      <!-- 标签 -->


      <!-- 热门陪玩师导航栏 -->
      <p style="font-size: 25px;margin: 48px 0 0 0;text-align: left"><b>热评陪玩师</b></p>
      <!-- 陪玩师轮播开始 -->
      <el-carousel indicator-position="none" style="width: 1100px;border-radius: 10px;margin-top: 10px" :interval="3000"
                   arrow="always">
        <el-carousel-item v-for="(item, index) in carouselItems" :key="index">
          <el-row :gutter="10">
            <!-- 第一个信息框 -->
            <el-col :span="12" style="border-radius: 10px">
              <el-col :span="13" style="padding: 0;position: relative">
                <div style="position: absolute; bottom: 10px; left: 5px;">
                  <VoiceComponent :audioUrl="voiceContent[0].audioUrl" /> <!-- 将VoiceComponent包裹在点击区域内 -->
                </div>
                <img :src="item.imageUrl1" width="100%">
              </el-col>
              <el-col :span="11" style="padding: 0">
                <div style="padding: 10px; background-image: url('images/indeximgs/bannerB.webp')">
                  <div>
                    <p style="font-size: 20px;font-weight: 10;margin: 0">{{ item.nickname1 }}</p>
                  </div>
                  <div style="margin-top: 10px">
                    <a href="" style="text-decoration: none;border-radius: 3px;padding: 0 15px;background-color: #636d86;
                       background-color: #e3e5e9;color:#636d86;font-size: 18px;font-weight: 10;">{{ item.skill1 }}</a>
                  </div>
                  <div>
                    <p class="comment">{{ item.comment1 }}</p>
                  </div>
                  <div style="margin-top: 53px;color: #d87901">
                    <span style="font-size: 24px">{{ item.price1 }}</span> 币/小时
                  </div>
                </div>
              </el-col>
            </el-col>
            <!-- 第二个信息框 -->

            <el-col :span="12" style="border-radius: 10px">
              <el-col :span="13" style="padding: 0;position: relative">
                <div style="position:absolute;bottom: 10px;left: 5px;">
                  <VoiceComponent :audioUrl="voiceContent[1].audioUrl" />
                </div>
                <img :src="item.imageUrl2" width="100%">
              </el-col>
              <el-col :span="11" style="padding: 0">
                <div style="padding: 10px; background-image: url('images/indeximgs/bannerB.webp')">
                  <div>
                    <p style="font-size: 20px;font-weight: 10;margin: 0">{{ item.nickname2 }}</p>
                  </div>
                  <div style="margin-top: 10px">
                    <a href="" style="text-decoration: none;border-radius: 3px;padding: 0 15px;background-color: #636d86;
                       background-color: #e3e5e9;color:#636d86;font-size: 18px;font-weight: 10;">{{ item.skill2 }}</a>
                  </div>
                  <div>
                    <p class="comment">{{ item.comment2 }}</p>
                  </div>
                  <div style="margin-top: 53px;color: #d87901">
                    <span style="font-size: 24px">{{ item.price2 }}</span> 币/小时
                  </div>
                </div>
              </el-col>
            </el-col>
          </el-row>
        </el-carousel-item>
      </el-carousel>
      <!-- 陪玩师轮播结束 -->
      <!-- 热门技能导航栏 -->
      <el-row>
        <el-col>
          <div>
            <b style="font-size: 25px;margin: 48px 0 0 0;float: left">热门技能</b>
            <a href="javascript:void(0)" @click="toList"
               style="text-decoration: none;padding: 0 26px; border-radius: 10px;
             background-color: #e3e5e9;color:#636d86;font-size: 18px;font-weight: 10;
             margin: 48px 0 0 0;float: right">查看更多
            </a>
          </div>
        </el-col>
      </el-row>
      <!-- 热门技能展示开始 -->
      <el-row gutter="20">
        <el-col :span="4" v-for="i in skillArr">
          <div style="height: 150px;width: 150px;float: left">
            <img :src="i.skillImg" width="100%" height="100%" style="border-radius: 10px">
            <p>{{ i.skillName }}</p>
          </div>
        </el-col>
      </el-row>
      <!-- 热门技能展示结束 -->
      <!-- 所有导航栏 -->
      <el-col v-for="d in navigationArr">
        <div>
          <b style="font-size: 25px;margin: 48px 0 0 0;float: left">{{ d.gameName }}</b>
          <a href="javascript:void(0)" @click=""
             style="text-decoration: none;padding: 0 26px; border-radius: 10px;
             background-color: #e3e5e9;color:#636d86;font-size: 18px;font-weight: 10;
             margin: 48px 0 0 0;float: right">查看更多
          </a>
        </div>
        <!-- 陪玩师展示开始 -->
        <el-carousel autoplay="false" indicator-position="none"
                     style="width: 1100px;border-radius: 10px;margin-top: 10px"
                     arrow="always">
          <el-carousel-item v-for="(e, index) in companionDetailArr" :key="index">
            <el-row style="overflow: hidden;margin: 0 -10px">
              <!--      第一个信息框       -->
              <div class="li" style="width: 20%;float: left" @click="toDetail">
                <div class="con" style="margin: 0 10px">
                  <div style="border-radius: 10px;overflow: hidden;position: relative">
                    <div style="position:absolute;bottom: 10px;left: 5px;">
                      <VoiceComponent :audioUrl="voiceContent[2].audioUrl" />
                    </div>
                    <img class="companion" :src="e.companionImg1" width="100%" height="100%"
                         style="border-radius: 10px">
                  </div>
                  <div class="txt">
                    <div style="font-weight: 10">{{ e.companionNickName1 }}</div>
                    <div>{{ e.star1 }}</div>
                    <div style="margin-top: 20px;color: #d87901"><b>{{ e.price1 }}</b> 币/小时</div>
                  </div>
                </div>
              </div>
              <!--      第二个信息框       -->
              <div class="li" style="width: 20%;float: left">
                <div class="con" style="margin: 0 10px">
                  <div style="border-radius: 10px;overflow: hidden;position: relative">
                    <div style="position:absolute;bottom: 10px;left: 5px;"><VoiceComponent/></div>
                    <img class="companion" :src="e.companionImg2" width="100%" height="100%"
                         style="border-radius: 10px">
                  </div>
                  <div class="txt">
                    <div style="font-weight: 10">{{ e.companionNickName2 }}</div>
                    <div>{{ e.star2 }}</div>
                    <div style="margin-top: 20px;color: #d87901"><b>{{ e.price2 }}</b> 币/小时</div>
                  </div>
                </div>
              </div>
              <!--      第三个信息框       -->
              <div class="li" style="width: 20%;float: left">
                <div class="con" style="margin: 0 10px">
                  <div style="border-radius: 10px;overflow: hidden;position: relative">
                    <div style="position:absolute;bottom: 10px;left: 5px;"><VoiceComponent/></div>
                    <img class="companion" :src="e.companionImg3" width="100%" height="100%"
                         style="border-radius: 10px">
                  </div>
                  <div class="txt">
                    <div style="font-weight: 10">{{ e.companionNickName3 }}</div>
                    <div>{{ e.star3 }}</div>
                    <div style="margin-top: 20px;color: #d87901"><b>{{ e.price3 }}</b> 币/小时</div>
                  </div>
                </div>
              </div>
              <!--      第四个信息框       -->
              <div class="li" style="width: 20%;float: left">
                <div class="con" style="margin: 0 10px">
                  <div style="border-radius: 10px;overflow: hidden;position: relative">
                    <div style="position:absolute;bottom: 10px;left: 5px;"><VoiceComponent/></div>
                    <img class="companion" :src="e.companionImg4" width="100%" height="100%"
                         style="border-radius: 10px">
                  </div>
                  <div class="txt">
                    <div style="font-weight: 10">{{ e.companionNickName4 }}</div>
                    <div>{{ e.star4 }}</div>
                    <div style="margin-top: 20px;color: #d87901"><b>{{ e.price4 }}</b> 币/小时</div>
                  </div>
                </div>
              </div>
              <!--      第五个信息框       -->
              <div class="li" style="width: 20%;float: left">
                <div class="con" style="margin: 0 10px">
                  <div style="border-radius: 10px;overflow: hidden;position: relative">
                    <div style="position:absolute;bottom: 10px;left: 5px;"><VoiceComponent/></div>
                    <img class="companion" :src="e.companionImg5" width="100%" height="100%"
                         style="border-radius: 10px">
                  </div>
                  <div class="txt">
                    <div style="font-weight: 10">{{ e.companionNickName5 }}</div>
                    <div>{{ e.star5 }}</div>
                    <div style="margin-top: 20px;color: #d87901"><b>{{ e.price5 }}</b> 币/小时</div>
                  </div>
                </div>
              </div>
            </el-row>
          </el-carousel-item>
        </el-carousel>
        <!-- 陪玩师展示结束 -->
      </el-col>

    </div>
  </div>
</template>

<script>
import VoiceComponent from "./VoiceComponent.vue"; // 导入 VoiceComponent 组件
export default {
  name: "IndexView",
  components: {
    VoiceComponent, // 注册 VoiceComponent 组件
  },

  data() {
    return {
      voiceContent: [
        { id: "1", audioUrl: "images/indeximgs/audio3.mp3" },
        { id: "2", audioUrl: "images/indeximgs/audio1.mp3" },
        { id: "3", audioUrl: "images/indeximgs/audio2.mp3" },
        // 添加更多的语音内容
      ],
      //陪玩师详情数组
      companionDetailArr: [
        {
          companionImg1: "images/indeximgs/companion1.webp",
          companionNickName1: "飛飛 ଘ◖⚆ᴥ⚆◗",
          star1: "⭐⭐⭐⭐⭐",
          price1: "520",
          companionImg2: "images/indeximgs/companion2.webp",
          companionNickName2: "阿平🥬",
          star2: "⭐⭐⭐⭐⭐",
          price2: "200",
          companionImg3: "images/indeximgs/companion3.webp",
          companionNickName3: "花花🌹遊戲150",
          star3: "⭐⭐⭐⭐⭐",
          price3: "360",
          companionImg4: "images/indeximgs/companion4.webp",
          companionNickName4: "小白🌸",
          star4: "⭐⭐⭐⭐⭐",
          price4: "400",
          companionImg5: "images/indeximgs/companion5.webp",
          companionNickName5: "點點✨️",
          star5: "⭐⭐⭐⭐⭐",
          price5: "420",
        },
        {
          companionImg1: "images/indeximgs/companion6.webp",
          companionNickName1: "Yumi 🐬",
          star1: "⭐⭐⭐⭐⭐",
          price1: "460",
          companionImg2: "images/indeximgs/companion7.webp",
          companionNickName2: "感冒鼻音重",
          star2: "⭐⭐⭐⭐",
          price2: "350",
          companionImg3: "images/indeximgs/companion8.webp",
          companionNickName3: "我超兇😡",
          star3: "⭐⭐⭐⭐⭐",
          price3: "400",
          companionImg4: "images/indeximgs/companion9.webp",
          companionNickName4: "七七",
          star4: "⭐⭐⭐⭐⭐",
          price4: "300",
          companionImg5: "images/indeximgs/companion10.webp",
          companionNickName5: "林洁",
          star5: "⭐⭐⭐⭐⭐",
          price5: "500",
        },
      ],
      //技能数组 游戏名
      navigationArr: [
        {
          gameName: "英雄联盟"
        },
        {
          gameName: "激斗峡谷"
        },
        {
          gameName: "传说对决"
        },
        {
          gameName: "特战英豪"
        },
        {
          gameName: "命理运势"
        },
        {
          gameName: "语音交流"
        },
        {
          gameName: "绝地求生"
        }
      ],
      //热门游戏数组
      skillArr: [
        {
          skillImg: "images/indeximgs/skill1.webp",
          skillName: "传说对决"
        },
        {
          skillImg: "images/indeximgs/skill2.webp",
          skillName: "传说对决"
        },
        {
          skillImg: "images/indeximgs/skill3.webp",
          skillName: "传说对决"
        },
        {
          skillImg: "images/indeximgs/skill4.webp",
          skillName: "传说对决"
        },
        {
          skillImg: "images/indeximgs/skill5.webp",
          skillName: "传说对决"
        },
        {
          skillImg: "images/indeximgs/skill6.webp",
          skillName: "传说对决"
        },
      ],
      //陪玩师轮播
      carouselItems: [
        {
          imageUrl1: "images/indeximgs/banner6.webp",
          imageUrl2: "images/indeximgs/banner7.webp",
          nickname1: "辛巴",
          nickname2: "麋糜",
          skill1: "英雄联盟",
          skill2: "传说对决",
          comment1: "@匿名评价：“可愛的女孩總是一出聲就讓人心花開，她就是這樣的女孩子”",
          comment2: "@baby：“射手超神非常棒，欢迎找他打传说”",
          price1: 150,
          price2: 200,
        },
        {
          imageUrl1: "images/indeximgs/banner8.webp",
          imageUrl2: "images/indeximgs/banner9.webp",
          nickname1: "Ina",
          nickname2: "希音",
          skill1: "特战英豪",
          skill2: "英雄联盟",
          comment1: "@匿名用户：“人美声甜操作猛”",
          comment2: "@SteVen“意识操作都很到位”",
          price1: 150,
          price2: 160,
        },
        {
          imageUrl1: "images/indeximgs/banner10.webp",
          imageUrl2: "images/indeximgs/banner11.webp",
          nickname1: "林洁",
          nickname2: "小鱼酥",
          skill1: "语音交流",
          skill2: "APEX",
          comment1: "@弊姓林：“林洁人美音甜，她陪伴我的喜怒哀乐，互相分享自己的经历，聊天过程中很放松”",
          comment2: "@来个超会的小姐姐吧：“好强，给你不一样的游戏体验”",
          price1: 250,
          price2: 160,
        }]
    }
  },
  methods: {
    toList() {
      this.$router.push("/list")
    },
    toDetail() {
      // this.$router.push("/detail")
    }
  },
  mounted() {
  }
}
</script>

<style scoped>
.companion {
  transition-duration: 0.5s; /*设置动画的持续时间*/
}

.companion:hover {
  transform: scale(1.1); /*缩放1.1倍*/
}

.comment {
  margin-top: 30px;
  height: 100px;
  font-size: 14px;
  overflow: hidden; /*超出不显示*/
  /*设置省略号相关样式*/
  display: -webkit-box;
  -webkit-line-clamp: 5; /*设置行数*/
  -webkit-box-orient: vertical; /*纵向*/
}
</style>